<template>
	<view class="addBooksPage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="headContentBack1"></view>
				<view class="backBtn" @click="backNext">
					⋘
				</view>
				<view class="headContentBack2"></view>
				<p>记好每一笔</p>
			</view>
		</view>
		<view class="paymentsBlock">
			<view :class="{paymentsClass: true, expenses: !payments}" @click="paymentsChange(false)">支出</view>
			<view :class="{paymentsClass: true, income: payments}" @click="paymentsChange(true)">收入</view>
			<view class="dateBlock"><uni-datetime-picker type="date" :clear-icon="false" v-model="chooseTime" /></view>
		</view>
		<view class="typeBlock">
			<view class="addTypeItem" @click="openTypePopup">+</view>
			<view v-for="(item,index) in typeList" :key="item.id" :class="{typeItem: !item.typeChoose, typeItemChoose:item.typeChoose}" @click="typeChange(index)">
				<view style="width: 52rpx;line-height: 30rpx;text-align: center;">{{item.type}}</view>
			</view>
		</view>
		<view class="remarkBlock">
			<textarea v-model="remark" placeholder="添加备注说明..." style="height: 100%;width: 100%;line-height: 34rpx;font-size: 28rpx;letter-spacing: 2rpx;padding: 0;margin: 0;" maxlength="30" />
		</view>
		<view class="amountBlock">
			<view class="amountHeader">
				<view class="amountStr">金额/¥</view>
				<view class="amountInput">{{formula}}</view>
				<view class="closeBtn" @click="keyWordShowBtn()" v-if="keyWordShow">关闭</view>
				<view class="closeBtn" style="border: 1rpx solid rgba(218, 159, 22, 0.7);background-color: rgba(218, 159, 22, 0.5);" @click="keyWordShowBtn()" v-if="!keyWordShow">拉起</view>
			</view>
			<view class="amountKey" v-if="keyWordShow">
				<view class="keyLeft">
					<view v-for="(item,index) in keyWord" :key="index" hover-class="keyBtn" @click="keyDown(item)">{{item}}</view>
				</view>
				<view class="keyRight">
					<view style="color: rgb(255, 0, 0);" hover-class="keyBtn" @click="delNum">删除</view>
					<view style="color: rgb(0, 123, 255);" hover-class="keyBtn" @click="submitData">确定</view>
				</view>
			</view>
		</view>
		<typePopup ref="popupShow"></typePopup>
	</view>
</template>

<script>
	import typePopup from '../../components/typePopup.vue'
	export default {
		components: {
			typePopup
		},
		data() {
			return {
				keyWordShow: true,
				keyWord:['×','÷','-','=',1,2,3,'+',4,5,6,'.',7,8,9,0],
				typeList:[
					{id:1,type:'餐饮',choose:true,istop:0},{id:2,type:'装扮',choose:true,istop:0},{id:3,type:'交通',choose:true,istop:0},
					{id:4,type:'购物',choose:true,istop:0},{id:5,type:'学习',choose:true,istop:0},{id:6,type:'娱乐',choose:true,istop:0},
					{id:7,type:'旅游',choose:true,istop:0},{id:8,type:'医疗',choose:true,istop:0},{id:9,type:'水果',choose:true,istop:0},
					{id:10,type:'礼物',choose:false,istop:0},{id:11,type:'聚会',choose:true,istop:0},{id:12,type:'社交',choose:false,istop:0},
					{id:13,type:'捐赠',choose:false,istop:0},{id:14,type:'通讯',choose:false,istop:0},{id:15,type:'书籍',choose:true,istop:0},
					{id:16,type:'药物',choose:true,istop:0},{id:17,type:'卫生',choose:true,istop:0},{id:18,type:'服务',choose:false,istop:0},
					{id:19,type:'房租',choose:true,istop:0},{id:20,type:'日常开销',choose:true,istop:0},{id:21,type:'其他',choose:false,istop:0}
				],
				typeJson:{},
				payments: false, //false支出，true收入
				chooseTime: '', //记账时间
				typeIndex: null, //当前选中账单类型
				remark: '', //备注说明
				formula: '', //显示的公式
				isIcon: false, //是否输入了符号
			}
		},
		beforeMount() {
			let timeElapsed = Date.now();
			let today = new Date(timeElapsed);
			today = today.toISOString()
			this.chooseTime = today.substr(0,10)
			for(let i in this.typeList){
				this.typeList[i].typeChoose = false
			}
			this.getTypeList()
		},
		methods: {
			getTypeList(){
				let value = uni.getStorageSync('canChooseTypeData');
				if (value) {
					this.typeList = JSON.parse(value)
				}else{
					uni.setStorageSync('typeData', JSON.stringify(this.typeList));
					uni.setStorageSync('canChooseTypeData', JSON.stringify(this.typeList))
				}
			},
			submitData(){
				if(this.typeIndex == null){
					uni.showToast({
						title: '未选中账单类型',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.keyDown('=')
				if(String(this.formula) == 'NaN' || this.formula == ''){
					this.formula = 0
				}else{
					this.formula = Number(this.formula)
				}
				if(this.formula == 0){
					uni.showToast({
						title: '未填写账单额度',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let paymentStr = '支出'
				if(this.payments){
					paymentStr = '收入'
				}
				this.formula = Math.abs(this.formula)
				let contentStr = '时间：' + this.chooseTime + '\n' +
								 '类型：' + this.typeList[this.typeIndex].type + '\n' + 
								 '状态：' + paymentStr + '\n' +
								 '金额：' + this.formula + '\n' +
								 '备注：' + this.remark
				let that = this
				let dataObj = {
					time: this.chooseTime,
					type: this.typeList[this.typeIndex].type,
					payment: paymentStr,
					formula: this.formula,
					remark: this.remark
				}
				uni.showModal({
					title: '账单详情',
					content: contentStr,
					success: function (res) {
						if (res.confirm) {
							that.storageData(dataObj)
							that.formula = 0
							that.remark = ''
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1000
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消操作',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			storageData(dataObj){
				let year = dataObj.time.substring(0,4)
				let month = dataObj.time.substring(0,7)
				let day = dataObj.time.substring(0)
				let storageDataJson = {}
				storageDataJson[year] = {}
				storageDataJson[year][month] = {}
				storageDataJson[year][month][day] = {}
				storageDataJson[year][month][day]['dayData'] = [dataObj]
				let daySum = {}
				
				if(dataObj.payment == '收入'){
					daySum.revenue = dataObj.formula
					daySum.expenditures = 0
					let obj = {}
					obj[dataObj.type] = dataObj.formula
					daySum['type'] = obj
				}else{
					daySum.revenue = 0
					daySum.expenditures = dataObj.formula
					let obj = {}
					obj[dataObj.type] = 0 - Number(dataObj.formula)
					daySum['type'] = obj
				}
				daySum.sum = Number(daySum.revenue) - Number(daySum.expenditures)
				storageDataJson[year][month][day]['daySum'] = daySum
				storageDataJson[year][month]['monthSum'] = daySum
				storageDataJson[year]['yearSum'] = daySum
				let value = uni.getStorageSync('storageDataJson');
				if (value) {
					let storageData = JSON.parse(value)
					if(!storageData[year]){
						storageData[year] = storageDataJson[year]
						uni.setStorageSync('storageDataJson', JSON.stringify(storageData))
						return
					}
					if(!storageData[year][month]){
						storageData[year][month] = storageDataJson[year][month]
						let oldTypeValue = storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]]
						let newTypeValue = Object.values(storageDataJson[year]['yearSum']['type'])[0]
						if(oldTypeValue == 0 || oldTypeValue){
							storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = this.sumFunction(newTypeValue,oldTypeValue)
						}else{
							storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = newTypeValue
						}
						storageData[year]['yearSum']['sum'] = this.sumFunction(storageDataJson[year]['yearSum']['sum'],storageData[year]['yearSum']['sum'])
						storageData[year]['yearSum']['expenditures'] = this.sumFunction(storageDataJson[year]['yearSum']['expenditures'],storageData[year]['yearSum']['expenditures'])
						storageData[year]['yearSum']['revenue'] = this.sumFunction(storageDataJson[year]['yearSum']['revenue'],storageData[year]['yearSum']['revenue'])
						uni.setStorageSync('storageDataJson', JSON.stringify(storageData))
						return
					}
					if(!storageData[year][month][day]){
						storageData[year][month][day] = storageDataJson[year][month][day]
						let oldTypeValue = storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]]
						let newTypeValue = Object.values(storageDataJson[year][month]['monthSum']['type'])[0]
						if(oldTypeValue == 0 || oldTypeValue){
							storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]] = this.sumFunction(newTypeValue,oldTypeValue)
						}else{
							storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]] = newTypeValue
						}
						storageData[year][month]['monthSum']['sum'] = this.sumFunction(storageDataJson[year][month]['monthSum']['sum'],storageData[year][month]['monthSum']['sum'])
						storageData[year][month]['monthSum']['expenditures'] = this.sumFunction(storageDataJson[year][month]['monthSum']['expenditures'],storageData[year][month]['monthSum']['expenditures'])
						storageData[year][month]['monthSum']['revenue'] = this.sumFunction(storageDataJson[year][month]['monthSum']['revenue'],storageData[year][month]['monthSum']['revenue'])
						
						let oldTypeValue1 = storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]]
						let newTypeValue1 = Object.values(storageDataJson[year]['yearSum']['type'])[0]
						if(oldTypeValue1 == 0 || oldTypeValue1){
							storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = this.sumFunction(newTypeValue1,oldTypeValue1)
						}else{
							storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = newTypeValue1
						}
						storageData[year]['yearSum']['sum'] = this.sumFunction(storageDataJson[year]['yearSum']['sum'],storageData[year]['yearSum']['sum'])
						storageData[year]['yearSum']['expenditures'] = this.sumFunction(storageDataJson[year]['yearSum']['expenditures'],storageData[year]['yearSum']['expenditures'])
						storageData[year]['yearSum']['revenue'] = this.sumFunction(storageDataJson[year]['yearSum']['revenue'],storageData[year]['yearSum']['revenue'])
						uni.setStorageSync('storageDataJson', JSON.stringify(storageData))
						return
					}
					storageData[year][month][day]['dayData'].push(storageDataJson[year][month][day]['dayData'][0])
					let oldTypeValue = storageData[year][month][day]['daySum']['type'][Object.keys(storageDataJson[year][month][day]['daySum']['type'])[0]]
					let newTypeValue = Object.values(storageDataJson[year][month][day]['daySum']['type'])[0]
					if(oldTypeValue == 0 || oldTypeValue){
						storageData[year][month][day]['daySum']['type'][Object.keys(storageDataJson[year][month][day]['daySum']['type'])[0]] = this.sumFunction(newTypeValue,oldTypeValue)
					}else{
						storageData[year][month][day]['daySum']['type'][Object.keys(storageDataJson[year][month][day]['daySum']['type'])[0]] = newTypeValue
					}
					storageData[year][month][day]['daySum']['sum'] = this.sumFunction(storageDataJson[year][month][day]['daySum']['sum'],storageData[year][month][day]['daySum']['sum'])
					storageData[year][month][day]['daySum']['expenditures'] = this.sumFunction(storageDataJson[year][month][day]['daySum']['expenditures'],storageData[year][month][day]['daySum']['expenditures'])
					storageData[year][month][day]['daySum']['revenue'] = this.sumFunction(storageDataJson[year][month][day]['daySum']['revenue'],storageData[year][month][day]['daySum']['revenue'])
					
					let oldTypeValue0 = storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]]
					let newTypeValue0 = Object.values(storageDataJson[year][month]['monthSum']['type'])[0]
					if(oldTypeValue0 == 0 || oldTypeValue0){
						storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]] = this.sumFunction(newTypeValue0,oldTypeValue0)
					}else{
						storageData[year][month]['monthSum']['type'][Object.keys(storageDataJson[year][month]['monthSum']['type'])[0]] = newTypeValue0
					}
					storageData[year][month]['monthSum']['sum'] = this.sumFunction(storageDataJson[year][month]['monthSum']['sum'],storageData[year][month]['monthSum']['sum'])
					storageData[year][month]['monthSum']['expenditures'] = this.sumFunction(storageDataJson[year][month]['monthSum']['expenditures'],storageData[year][month]['monthSum']['expenditures'])
					storageData[year][month]['monthSum']['revenue'] = this.sumFunction(storageDataJson[year][month]['monthSum']['revenue'],storageData[year][month]['monthSum']['revenue'])
					
					let oldTypeValue1 = storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]]
					let newTypeValue1 = Object.values(storageDataJson[year]['yearSum']['type'])[0]
					if(oldTypeValue1 == 0 || oldTypeValue1){
						storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = this.sumFunction(newTypeValue1,oldTypeValue1)
					}else{
						storageData[year]['yearSum']['type'][Object.keys(storageDataJson[year]['yearSum']['type'])[0]] = newTypeValue1
					}
					storageData[year]['yearSum']['sum'] = this.sumFunction(storageDataJson[year]['yearSum']['sum'],storageData[year]['yearSum']['sum'])
					storageData[year]['yearSum']['expenditures'] = this.sumFunction(storageDataJson[year]['yearSum']['expenditures'],storageData[year]['yearSum']['expenditures'])
					storageData[year]['yearSum']['revenue'] = this.sumFunction(storageDataJson[year]['yearSum']['revenue'],storageData[year]['yearSum']['revenue'])
					uni.setStorageSync('storageDataJson', JSON.stringify(storageData))
					return
				}else{
					uni.setStorageSync('storageDataJson', JSON.stringify(storageDataJson))
				}
			},
			sumFunction(newTypeValue,oldTypeValue){
				let sumValue = 0
				if(Number(oldTypeValue) < 0){
					if(Number(newTypeValue) < 0){
						sumValue = Math.abs(Number(oldTypeValue)) + Math.abs(Number(newTypeValue))
						sumValue = 0 - Number(sumValue)
					}else{
						sumValue = Number(newTypeValue) - Math.abs(Number(oldTypeValue))
					}
				}else{
					sumValue = Number(oldTypeValue) + Number(newTypeValue)
				}
				return sumValue
			},
			openTypePopup(){
				this.$refs.popupShow.getRegionList(this.typeList)
			},
			delNum(){
				if(this.formula === ''){
					this.isIcon = false
					return
				}
				this.formula = String(this.formula).substring(0, this.formula.length - 1)
			},
			keyDown(key){
				this.formula += ''
				if(key == '.' || key == '+' || key == '×' || key == '÷' || key == '-'){
					if(this.formula == ''){
						uni.showToast({
							title: '请先输入数字',
							icon: 'none',
							duration: 1000
						})
						return
					}
				}
				if(key == '='){
					if(this.isIcon){
						this.isIcon = false
						let iconList = ['+','-','×','÷']
						for(let i in iconList){
							if(this.formula.includes(iconList[i])){
								switch (i){
									case '0':
										this.formula = (Number(this.formula.split('+')[0]) + Number(this.formula.split('+')[1])).toFixed(2)
										break
									case '1':
										if(this.formula.split('-')[2]){
											this.formula = (Number(this.formula.split('-')[1]) + Number(this.formula.split('-')[2])).toFixed(2)
											this.formula = 0 - Number(this.formula)
										}else{
											this.formula = (Number(this.formula.split('-')[0]) - Number(this.formula.split('-')[1])).toFixed(2)
										}
										break
									case '2':
										this.formula = (Number(this.formula.split('×')[0]) * Number(this.formula.split('×')[1])).toFixed(2)
										break
									case '3':
										this.formula = (Number(this.formula.split('÷')[0]) / Number(this.formula.split('÷')[1])).toFixed(2)
										break
								}
								this.formula = Boolean(Number(this.formula))?this.formula:0
								this.formula += ''
							}
						}
					}
					return
				}
				if(key == '+' || key == '×' || key == '÷' || key == '-'){
					if(!this.isIcon){
						this.isIcon = true
						this.formula = this.formula + '' + key
						return
					}
					let iconList = ['+','-','×','÷']
					for(let i in iconList){
						if(this.formula.includes(iconList[i])){
							switch (i){
								case '0':
									this.formula = (Number(this.formula.split('+')[0]) + Number(this.formula.split('+')[1])).toFixed(2)
									break
								case '1':
									if(this.formula.split('-')[2]){
										this.formula = (Number(this.formula.split('-')[1]) + Number(this.formula.split('-')[2])).toFixed(2)
										this.formula = 0 - Number(this.formula)
									}else{
										this.formula = (Number(this.formula.split('-')[0]) - Number(this.formula.split('-')[1])).toFixed(2)
									}
									break
								case '2':
									this.formula = (Number(this.formula.split('×')[0]) * Number(this.formula.split('×')[1])).toFixed(2)
									break
								case '3':
									this.formula = (Number(this.formula.split('÷')[0]) / Number(this.formula.split('÷')[1])).toFixed(2)
									break
							}
							this.formula = Boolean(Number(this.formula))?this.formula:0
							this.formula = this.formula + '' + key
							break
						}
					}
					return
				}
				this.formula += '' + key
			},
			typeChange(index){
				if(this.typeIndex === index){
					return
				}
				this.typeList[index].typeChoose = true
				if(this.typeIndex !== null){
					this.typeList[this.typeIndex].typeChoose = false
				}
				this.typeIndex = index
				this.$forceUpdate()
			},
			paymentsChange(key){
				this.payments = key
			},
			keyWordShowBtn(){
				this.keyWordShow = !this.keyWordShow
			},
			backNext(){
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	}
</script>

<style>
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	}
	
	.addBooksPage{
		width: 100%;
		height: 100vh;
		background-color: rgba(250, 250, 250,0.8);
	}
	
	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		background:linear-gradient(to right ,rgba(78, 60, 117, 0.9),rgba(78, 60, 117, 0.4));
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		z-index: 30;
		margin-top: 1vh;
		left: 20rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: rgba(190, 246, 255, 1.0);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(78, 60, 117, 0.3);
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(78, 60, 117, 0.5);
	}
	
	.paymentsBlock{
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
	}
	
	.paymentsBlock > .paymentsClass{
		width: 150rpx;
		height: 50rpx;
		margin-left: 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
		letter-spacing: 10rpx;
		border: 1rpx solid rgb(200, 200, 200);
		background-color: rgb(250, 250, 250);
		color: rgb(200, 200, 200);
		border-radius: 8rpx;
	}
	
	.expenses{
		color: rgba(78, 60, 117, 0.7) !important;
		border: 1rpx solid rgba(78, 60, 117, 0.8) !important;
		background-color: rgba(78, 60, 117, 0.15) !important;
	}
	
	.income{
		color: rgba(202, 157, 50, 0.8) !important;
		border: 1rpx solid rgba(202, 157, 50, 0.7) !important;
		background-color: rgba(202, 157, 50, 0.15) !important;
	}
	
	.dateBlock{
		margin-left: 100rpx;
		width: 290rpx;
	}
	
	.typeBlock{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: calc(100% - 20rpx);
		height: 220rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		overflow: auto;
	}
	
	.typeBlock > .typeItem{
		width: 90rpx;
		height: 90rpx;
		margin: 10rpx;
		box-sizing: border-box;
		/* background-color: rgba(139, 110, 218, 0.4); */
		font-size: 24rpx;
		letter-spacing: 2rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid rgba(220, 220, 220, 1);
		background-color: rgba(250, 250, 250, 0.7);
		color: rgba(180, 180, 180, 1);
	}
	
	.typeItemChoose{
		width: 90rpx;
		height: 90rpx;
		margin: 10rpx;
		box-sizing: border-box;
		background-color: rgba(139, 110, 218, 0.6);
		font-size: 24rpx;
		letter-spacing: 2rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid rgba(139, 110, 218, 0.4);
		color: rgba(250, 250, 250, 1);
	}
	
	.typeBlock > .addTypeItem{
		width: 82rpx;
		height: 82rpx;
		margin: 14rpx;
		box-sizing: border-box;
		font-size: 54rpx;
		border-radius: 8rpx;
		line-height: 76rpx;
		text-align: center;
		border: 2rpx dashed rgba(139, 110, 218, 0.4);
		color: rgba(139, 110, 218, 0.7);
	}
	
	.typeBlock::after{
		content: ' 》';
		width: 30rpx;
		padding-left: 10rpx;
		box-sizing: border-box;
		height: 205rpx;
		margin-top: 5rpx;
		position: absolute;
		right: 0;
		background-color: rgba(0, 0, 0, 0.2);
		line-height: 220rpx;
		text-align: center;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.remarkBlock{
		width: calc(100% - 40rpx);
		height: 102rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		padding: 2rpx;
		/* box-sizing: border-box; */
		border: 1rpx solid rgba(139, 110, 218, 0.5);
		border-bottom: 1rpx solid rgba(139, 110, 218, 0.5);
		background-color: rgba(240, 240, 240, 0.2);
		border-radius: 8rpx;
	}
	
	.amountBlock{
		width: 100%;
		/* height: 750rpx; */
		min-height: 130rpx;
		position: absolute;
		bottom: 0;
		background-color: rgba(255, 255, 255, 1);
	}
	
	.amountBlock .amountHeader{
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-top: 10rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.amountBlock .amountHeader .closeBtn{
		width: 17%;
		height: 70rpx;
		margin-top: 10rpx;
		margin-left: 8%;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		border-radius: 16rpx;
		border: 1rpx solid rgba(139, 110, 218, 0.7);
		background-color: rgba(139, 110, 218, 0.5);
		color: rgba(255, 255, 255, 1);
	}
	
	.amountBlock .amountHeader .amountInput{
		width: 55%;
		height: 80rpx;
		line-height: 100rpx;
		text-align: right;
		font-size: 40rpx;
		letter-spacing: 2rpx;
		border-bottom: 2rpx solid rgba(139, 110, 218, 0.5);
		white-space: nowrap;
		overflow: auto;
	}
	
	.amountBlock .amountHeader .amountStr{
		width: 20%;
		height: 80rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 34rpx;
		letter-spacing: 2rpx;
		color: rgba(180, 180, 180, 0.9);
	}
	
	.amountBlock .amountKey{
		width:100%;
		margin-top: 10rpx;
		height: 600rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.amountBlock .amountKey .keyLeft{
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		color: rgba(139, 110, 218, 0.9);
	}
	
	.amountBlock .amountKey .keyLeft > view{
		width: 25%;
		height: 25%;
		box-sizing: border-box;
		border: 1rpx solid rgba(139, 110, 218, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		
	}
	
	.amountBlock .amountKey .keyRight{
		width: 20%;
		height: 100%;
	}
	
	.amountBlock .amountKey .keyRight > view{
		width: 100%;
		height: 50%;
		box-sizing: border-box;
		border: 1rpx solid rgba(139, 110, 218, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}
	
	.keyBtn{
		background-color: rgb(245, 245, 245);
		/* color: rgba(255, 255, 255, 1); */
	}
</style>
